<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query :searchParam="searchParams.params" @on-search="search" @on-reset="resetSearch"></pro-query>
          </div>
          <!-- 列表 -->
          <pro-table ref="tableRef" :fetch="fetch" :columns="tableConfig.columns" :operate="operate"
            :param="state.param" :toolbar="toolbar" :operationWidth="80" :pagination="pagination">
          </pro-table>
        </a-card>
      </a-col>
    </a-row>
    <importModal
      :exportConfig="exportConfig"
      :visible="state.importVisible"
      @close="closeImport"></importModal>
  </page-layout>
</template>
<script>
export default {
  name: "studentbopManage"
}
</script>
<script setup>
  import {
    btnIsPowerByCode,
    filterEmptyByObject
  } from '@/tools/common'
  import {
    message,
    modal
  } from 'ant-design-vue';
  import {
    ExclamationCircleOutlined
  } from '@ant-design/icons-vue';
  import {
    page,
    remove,
    templateUrl,
    imports
  } from "@/api/module/student/student-bop-manage";
  import {
    reactive,
    createVNode,
    ref,
    onMounted,
    onActivated
  } from 'vue';
  import {
    useRouter
  } from 'vue-router'
  import {
    getDictByCodesReturnObj
  } from '@/tools/get-dict'
  import dictEnum from '@/const/dict'
  import moment from 'moment';
  import { useI18n } from "vue-i18n";
  import importModal from '@/component/import/index.vue'
  const  { t } = useI18n();
  const removeKey = "remove";
  const tableRef = ref()
  const router = useRouter()
  const pagination = {
    pageNum: 1,
    pageSize: 10,
  }
  let dictLists = reactive({
    data: {}
  })
  const state = reactive({
    selectedRowKeys: [],
    param: {},
    visibleSave: false,
    visibleEdit: false,
    visibleInfo: false,
    importVisible: false,
    recordEdit: {},
    recordInfo: {},
  })

  let searchParams = reactive({
    params: []
  })

  let tableConfig = reactive({
    columns: []
  })
  const resetSearch = () => {
      state.param = {
        chnSource: null,
        stuName: null,
        colName: null,
        createTime: null,
        colBtime: null,
        saleHead: null,
        asdHead: null,
        actHead: null,
      }
      tableRef.value.reload()
    }

onActivated(() => {
    tableRef.value.reload();
  })
  /// 数据来源 [模拟]
  const fetch = async (param) => {
    const response = await page(param);
    return {
      data: response.record,
      total: response.total
    };
  };

  const gotoAdd = () => {
    router.push('/studentrtv/student-bop-manage/add')
  }

  /// 删除配置
  const removeMethod = (record) => {
    modal.confirm({
      title: '您是否确定要删除此配置?',
      icon: createVNode(ExclamationCircleOutlined),
      okText: '确定',
      cancelText: '取消',
      onOk() {
        message.loading({
          content: "提交中...",
          key: removeKey
        });
        remove({
          "id": record.id
        }).then((response) => {
          if (response.success) {
            message.success({
              content: "删除成功",
              key: removeKey,
              duration: 1
            }).then(() => {
              tableRef.value.reload()
            })
          } else {
            message.error({
              content: "删除失败",
              key: removeKey,
              duration: 1
            })
          }
        })
      }
    });
  }

  /// 行操作
  const operate = [{
      label: t('button.detail'),
      event: (record) => {
        router.push({
          path: '/studentrtv/student-bop-manage/detail',
          query: {
            id: record.id
          }
        })
      }
    },
    // {
    //   label: "更改负责人",
    //   event: function(record) {

    //   }
    // },
    // {
    //   code: 'student-bop-manage:remove',
    //   label: t('button.delete'),
    //   event: function(record) {
    //     removeMethod(record)
    //   }
    // },
  ];

  const toolbar = [{
      code: 'student-bop-manage:add',
      label: t('button.newly'),
      type: 'primary',
      event: (selectedRowKeys) => {
        gotoAdd()
      }
    },
    {
      code: '',
      label: t('button.batchImport'),
      type: '',
      event: (selectedRowKeys) => {
        handleExport()
      }
    },
  ]

  const exportConfig = reactive({
    title: '学生导入',
    exportExcel: imports,
    templateUrl: templateUrl,
    downMethod: 'GET',
    fileName: '学生导入模板',
    params: {}
  })
  const handleExport = () => {
    state.importVisible = true
  };
  const closeImport = (value) => {
    state[value] = false
    tableRef.value.reload()
  }

  const openDialog = (type) => {
    state[type] = true
  }

  const search = (value) => {
    state.param = {
      ...state.param,
      ...filterEmptyByObject(value)
    }
  }

  const onSelectChange = selectedRowKeys => {
    state.selectedRowKeys = selectedRowKeys;
  };

  onMounted(async () => {
    dictLists.data = await getDictByCodesReturnObj([
      dictEnum.CHANNEL_SOURCE,
      dictEnum.DEGREE_INTENTION,
    ])

    searchParams.params = [{
        dataIndex: "chnSource",
        key: "chnSource",
        type: "select",
        label: t('student-bop-manage.label.chnSource'),
        placeholder: t('placeholder.pleaseSelect'),
        options: dictLists.data[dictEnum.CHANNEL_SOURCE],
      },
      {
        dataIndex: "name",
        key: "name",
        type: "input",
        label: t('student-bop-manage.label.stuName'),
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "comeSchName",
        key: "comeSchName",
        type: "input",
        label: '来自大学',
        placeholder: t('placeholder.pleaseEnter'),
      },
      {
        dataIndex: "salePersonName",
        key: "salePersonName",
        type: "input",
        label: t('student-bop-manage.label.saleHead'),
        placeholder: t('placeholder.pleaseEnter'),
        hidden: true
      },
      {
        dataIndex: "channelPersonName",
        key: "channelPersonName",
        type: "input",
        label: '渠道负责人',
        placeholder: t('placeholder.pleaseEnter'),
        hidden: true
      },
      {
        dataIndex: "interDegree",
        key: "interDegree",
        type: "select",
        label: t('student-bop-manage.label.interDegree'),
        placeholder: t('placeholder.pleaseSelect'),
        options: dictLists.data[dictEnum.DEGREE_INTENTION],
        hidden: true
      }
    ]
    tableConfig.columns = [
      {
        dataIndex: "name",
        key: "name",
        width: 130,
        title: '姓名',
      },
      {
        dataIndex: "lightId",
        key: "lightId",
        width: 130,
        title: 'Light ID',
      },
      {
        dataIndex: "salePersonName",
        key: "salePersonName",
        width: 130,
        title: '销售负责人',
      },
      {
        dataIndex: "wxNickname",
        key: "wxNickname",
        width: 130,
        title: '微信昵称',
      },
      {
        dataIndex: "channelSources",
        key: "channelSources",
        width: 130,
        title: '渠道来源',
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.CHANNEL_SOURCE]) {
            const item = dictLists.data[dictEnum.CHANNEL_SOURCE].find(
              v => v.value == data
            );
            return item ? item.label : "";
          }
        }
      },
      {
        dataIndex: "channelPersonName",
        key: "channelPersonName",
        width: 130,
        title: '渠道负责人',
      },
      {
        dataIndex: "channelSources",
        key: "channelSources",
        width: 130,
        title: '意向程度',
        cellRender: (record, data) => {
          if (dictLists.data[dictEnum.DEGREE_INTENTION]) {
            const item = dictLists.data[dictEnum.DEGREE_INTENTION].find(
              v => v.value == data
            );
            return item ? item.label : "";
          }
        }
      },
      {
        dataIndex: "comeSchName",
        key: "comeSchName",
        width: 150,
        title: '来自大学名称',
      },
      {
        dataIndex: "currentCityOrCountrys",
        key: "currentCityOrCountrys",
        width: 150,
        title: '目前所在地',
      },
    ]
  })
</script>
